import React, { useState } from "react";
import PropTypes from "prop-types";
import "./poster.scss";

// 互动
const PosterItem = () => {
  const img = [
    "https://gaoding-market.dancf.com/market-operations/market/side/e31a712c2bb84afe97030685c056977e/1731322129724.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/d1c8f17a5bbf4e0ebca9e1f01c0842a2/1723805913052.png?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/21dc8dfc8f1243f2b814b47ba88827e6/1731322225183.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/5b8bf1b5fcc14bd2b4b2071c7b7af81a/1728699682628.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/f2f5d7c42ff14466b205e19dbace7060/1731322353205.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/75f3f4e7229546c8a20216f59214729d/1731323041519.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/6a7d28e309224d12a1f19e843978b6d2/1731323114977.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/56983ac3426e401c865e74f3868a9e5b/1723806212526.png?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/7a83346971c746f39c412b6f51c8a7c4/1723806243846.png?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/ed573c6d717f444f9c46aa819108739a/1731323381716.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/b075cd24585a47e294841341cf3f268f/1731323481347.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/6a47da82bdb6461180ef9396d0d0f26b/1723806327891.png?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/2ffa5b8ee487415eb8a02091c131cab3/1723806566616.jpg?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/a1aadaab33bd44bbaa5116c26c88c86e/1723806616007.png?x-oss-process=image/format,webp",
    "https://gaoding-market.dancf.com/market-operations/market/side/e91964a837294e76873432d8b57dbaeb/1723806715705.jpg?x-oss-process=image/format,webp",
  ];
  const slideWidth = 200; // 每个工具项的宽度，可根据实际情况调整
  const [scrollLeft, setScrollLeft] = useState(0);
  const handlePrevClick = () => {
    setScrollLeft((prevScrollLeft) => Math.max(prevScrollLeft - slideWidth, 0));
  };
  const handleNextClick = () => {
    setScrollLeft((prevScrollLeft) => prevScrollLeft + slideWidth);
  };
  return (
    <div className="poster">
      <h1>互动游戏 助力营销裂变</h1>
      <button className="button" onClick={handlePrevClick}>
        &lt;
      </button>
      <div
        className="poster-img"
        style={{
          scrollBehavior: "smooth",
          whiteSpace: "nowrap",
          transform: `translateX(-${scrollLeft}px)`,
        }}
      >
        {img.map((item, index) => {
          return (
            <div
              key={index}
              style={{
                width: `${slideWidth}px`,
                margin: "10px",
              }}
            >
              <img src={item} alt="Poster" />
              <p>互动</p>
            </div>
          );
        })}
      </div>
      <button className="button-next" onClick={handleNextClick}>
        &gt;
      </button>
    </div>
  );
};

export default PosterItem;
